<template>
  <div class="app-container">
    <HeaderBar />
    <div class="main-content">
      <div class="left-panel">
        <ProjectStatus />
        <QualityRisk />
        <WorkRisk />
      </div>
      <MapPanel />
      <RightPanel />
    </div>
  </div>
</template>

<script>
import HeaderBar from './components/HeaderBar.vue'
import ProjectStatus from './components/ProjectStatus.vue'
import QualityRisk from './components/QualityRisk.vue'
import WorkRisk from './components/WorkRisk.vue'
import MapPanel from './components/MapPanel.vue'
import RightPanel from './components/RightPanel.vue'

export default {
  name: 'App',
  components: {
    HeaderBar,
    ProjectStatus,
    QualityRisk,
    WorkRisk,
    MapPanel,
    RightPanel
  }
}
</script>

<style scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  background: #0a1a2a;
  overflow: hidden;
}
.main-content {
  display: flex;
  height: calc(100vh - 60px);
}
.left-panel {
  width: 350px;
  padding: 10px 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
